<!DOCTYPE html>
<html>
    <head>
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="../css/settings.css">
        <link rel="stylesheet" href="../css/libraries/nice-select.css">
    </head>
    <body>
        <div id="settings">
        <div id="settings-container">
            <label for="camera-select" id="camera-select-label">Camera source</label>
            <select id="camera-select"></select>
            <label class='check'>
              <input id='flip-camera' type='checkbox'>
              <span></span>
              <labelp id="flip-label">Flip camera horizontally</labelp>
            </label>
            <label for="audio-select" id="mic-label">Microphone source</label>
            <select id="audio-select"></select>
            <label class='check'>
              <input id='push-talk' type='checkbox'>
              <span></span>
                <labelp id="push-label">Push to talk (Ctrl+M)</labelp>
            </label>
            <label class='check'>
              <input type='checkbox' id="persistent">
              <span></span>
                <labelp id="hover-label">Only show toolbar on hover</labelp>
            </label>
        </div>
        </div>
        <div id="arrow"></div>
        <script src="../js/libraries/jquery-3.5.1.min.js"></script>
        <script src="../js/libraries/jquery.nice-select.min.js"></script>
        <script src="../js/settings.js"></script>
    </body>
</html>